<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>overflowhidden textalgin center</title>
	<style>
		*{margin: 0;padding: 0;	}
		.outer_wp {;width: 300px;margin: 60px auto;border: 2px solid red;padding: 5px;height: auto;}
		.outer_wp.hide {overflow:hidden;height: 60px}
		.inner {}
		#test {position: fixed;left: 50%;top: 600px;}
	</style>
	<script src="./lib/zepto.min.js"></script>
</head>
<body>
	<div class="outer_wp hide">
		<div class="inner">
			外层div如果overflow:hidden，内层div是否会出现这种现象，第一行文字居中显示！真是项目中遇到的问题，
			解决方案是给内层div也加上overflow：hidden属性，即可使得内层div第一行文字靠左显示！这一现象出现的情景是
			在一个列表页，对于特定地方的内容最多展示两行，可显示展开按钮，点击展开按钮，显示全部内容，展开二字变成
			收起，点击收起，重新展示两行文字。如果原内容就少于两行，则不显示展开二字。该效果的实现是通过监测内层div的
			宽度来实现的。
		</div>
	</div>
	<button id="test">点击</button>
	<script>
		$(function() {
			$('#test').on('click',function() {
				$('.outer_wp').toggleClass('hide');
			})
		})
	</script> 
</body>
</html>